<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highcharts Example</title>
<script type="text/javascript" src="/server_page/website/resources/jquery-1.8.2.min.js"></script>

<script type="text/javascript">

$(function() {
    Highcharts.setOptions({
        global: { useUTC: false }
    });

    function CreateChart(container, title, yTitle) {
        var chart = new Highcharts.Chart({
                chart: {
                    type: 'spline',
                    width: 300,
                    height: 200,
                    animation: Highcharts.canvas,  // svg or canvas
                    marginRight: 10,
                    renderTo: container
                },
		title: { text: title, size: 10 },
                xAxis: {
                    type: 'datetime',
                    title: { text: '时间' },
                    tickPixelInterval: 150
                },
                yAxis: {
                    title: { text: yTitle },
                    plotLines: [{ value: 0, width: 1, color: '#808080' }]
                },
                legend: { enabled: false },
                exporting: { enabled: false },
                series: [{ name: 'Update data', data: [] }]
            });

        var data = [];
        var x = (new Date()).getTime();
        for (var i = -14; i <= 0; i++) {
            data.push({ x: x + i * 1000, y: 0 });
        }
        chart.series[0].setData(data);
        
        return chart;
    }

    var allCharts = new Array();
    
    var totalConnsChart = CreateChart("total_conns", "总连接数", "总连接数");
    var totalQlenChart = CreateChart("total_qlen", "等待任务数", "等待任务数");
    var currThreadsChart = CreateChart("curr_threads", "总线程数", "总线程数");
    var busyThreadsChart = CreateChart("busy_threads", "繁忙线程数", "繁忙线程数");
    
    allCharts["totalConnsChart"] = totalConnsChart;
    allCharts["totalQlenChart"] = totalQlenChart;
    allCharts["currThreadsChart"] = currThreadsChart;
    allCharts["busyThreadsChart"] = busyThreadsChart;
    
    function CreateNode(addr) {
        var table = $("<table id='" + addr + "'>");
        table.appendTo($("#all_servers"));

        /////////////////////////////////////////////////////////////////////
        
        var tr = $("<tr></tr>");
        tr.appendTo(table);
        var id = addr + "_conns";
        var td = $("<td id='" + id + "' style='width: 110px; "
                + "height: 210px; margin: 0 auto'></td>");
        td.appendTo(tr);
        allCharts[id] = CreateChart(id, addr, "总连接数");

        id = addr + "_qlen";
        td = $("<td id='" + id + "' style='width: 110px; "
                + "height: 210px; margin: 0 auto'></td>");
        td.appendTo(tr);
        allCharts[id] = CreateChart(id, addr, "等待任务数");

        /////////////////////////////////////////////////////////////////////
        
        //tr = $("<tr></tr>");
        //tr.appendTo(table);
        id = addr + "_curr_threads";
        td = $("<td id='" + id + "' style='width: 110px; "
                + "height: 210px; margin: 0 auto'></td>");
        td.appendTo(tr);
        allCharts[id] = CreateChart(id, addr, "总线程数");

        id = addr + "_busy_threads";
        td = $("<td id='" + id + "' style='width: 110px; "
                + "height: 210px; margin: 0 auto'></td>");
        td.appendTo(tr);
        var chart = CreateChart(id, addr, "繁忙线程数");
        allCharts[id] = chart;

        /////////////////////////////////////////////////////////////////////

        //tr = $("<tr></tr>");
        //tr.appendTo(table);
        id = addr + "_load";
        td = $("<td id='" + id + "' style='width: 110px; "
                + "height: 210px; margin: 0 auto'></td>");
        td.appendTo(tr);
        allCharts[id] = CreateChart(id, addr, "系统负载");

	/*
        td = $("<td style='min-width: 110px; "
                + "height: 310px; margin: 0 auto'></td>");
        td.appendTo(tr);
	*/

        /////////////////////////////////////////////////////////////////////
        
        var hr = $("<hr/>");
        hr.appendTo($("#all_servers"));
        return chart;
    }

    var timerId = null;
    
    function getResult() {
        window.clearInterval(timerId);
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "/server_page/showAll",
            error: function() {
                var x = (new Date()).getTime();
                for (var i in allCharts) {
                    var chart = allCharts[i];
                    chart.series[0].addPoint([x, 0], true, true);
                }
                timerId = window.setInterval(getResult, 1000);
            },
            success: function(data) {
                var x = (new Date()).getTime();
                var servers = data['servers'];
                var totalConns = 0, totalUsed = 0, totalQlen = 0;
                var totalCurrThreads = 0, totalBusyThreads = 0;
                for (var i = 0; i < servers.length; i++) {
                    var server = servers[i];
                    var addr = server['server'];
                    if (addr == null)
                        continue;
                    var conns = server['conns'];
                    var used = server['used'];
                    var qlen = server['qlen'];
                    var curr_threads = server['curr_threads'];
                    var busy_threads = server['busy_threads'];
                    var load = server['load'];

                    totalConns += conns;
                    totalUsed += used;
                    totalQlen += qlen;
                    totalCurrThreads += curr_threads;
                    totalBusyThreads += busy_threads;

                    var chartConns = allCharts[addr + "_conns"];
                    if (chartConns == null)
                        chartConns = CreateNode(addr);
                
                    var chartQlen = allCharts[addr + "_qlen"];
                    var chartCurrThreads = allCharts[addr + "_curr_threads"];
                    var chartBusyThreads = allCharts[addr + "_busy_threads"];
                    var chartLoad = allCharts[addr + "_load"];
                
                    chartConns.series[0].addPoint([x, conns], true, true);
                    chartQlen.series[0].addPoint([x, qlen], true, true);
                    chartCurrThreads.series[0].addPoint([x, curr_threads], true, true);
                    chartBusyThreads.series[0].addPoint([x, busy_threads], true, true);
                    chartLoad.series[0].addPoint([x, load], true, true);
                }
            
                totalConnsChart.series[0].addPoint([x, totalConns], true, true);
                totalQlenChart.series[0].addPoint([x, totalQlen], true, true);
                currThreadsChart.series[0].addPoint([x, totalCurrThreads], true, true);
                busyThreadsChart.series[0].addPoint([x, totalBusyThreads], true, true);
            
                timerId = window.setInterval(getResult, 1000);
            }
        });
    }

    $(document).ready(function() {
        timerId = window.setInterval(getResult, 1000);
    });
});

</script>
</head>
<body>

<table>
  <tr>
    <td id="total_conns" style="width: 110px; height: 210px; margin: 0 auto"></td>
    <td id="total_qlen" style="width: 110px; height: 210px; margin: 0 auto"></td>
    <td id="curr_threads" style="width: 110px; height: 210px; margin: 0 auto"></td>
    <td id="busy_threads" style="width: 110px; height: 210px; margin: 0 auto"></td>
  </tr>
</table>
<hr/>

<div id="all_servers"></div>

<script src="/server_page/website/resources/highcharts/js/highcharts.js"></script>
<script src="/server_page/website/resources/highcharts/js/exporting.js"></script>

</body>
</html>
